<template>
  <div>
    <el-popover trigger="click" placement="right" title="选择部门" width="250" @show="getOrg" :show-after="300">
		<template #reference>
			<div style="display:flex;">
				<el-input v-model="orgTitle" :placeholder="placeholder" readonly :disabled="disabled" ></el-input>
			</div>
		</template>
	  <el-container>
		  <el-header>
			  <el-input placeholder="输入关键字进行过滤" v-model="orgFilterText" clearable></el-input>
		  </el-header>
		  <el-main class="nopadding">
			  <el-tree ref="org" class="menu" :props="orgProps" node-key="id" :data="orgs"
					   :current-node-key="''" :highlight-current="true" :expand-on-click-node="false"
					   :filter-node-method="orgFilterNode" @node-click="orgClick"></el-tree>
		  </el-main>
	  </el-container>
    </el-popover>
  </div>
</template>

<script>
export default {
	name:"orgTree",
	emits: ['selectOne'],
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: "点击选择部门"
    },
	disabled:{
		type:Boolean,
		default:false
	},
	params:{
		type:Object,
		default:null
	}
  },
  data() {
    return {
      orgpLoading: false,
	  orgTitle: "",
	  orgFilterText: '',
	  orgs:[],
		orgProps: {
			label: (data)=>{
				return data.title
			}
		},
    };
  },
	mounted() {
	},
	watch: {
		orgFilterText(val) {
			this.$refs.org.filter(val);
		}
	},
  methods: {
	  async getOrg(){
		  var res = await this.$API.system.organization.list.get(this.params);
		  this.orgs = res.data;
	  },
	  setData(data){
		  this.orgTitle = data.departmentTitle;
		  this.$emit('selectOne', data)
	  },
	  //树过滤
	  orgFilterNode(value, data){
		  if (!value) return true;
		  return data.title.indexOf(value) !== -1;
	  },
	  //树点击事件
	  orgClick(data){
		  this.orgTitle = data.title;
		  this.$emit('selectOne', data)
	  },
  }
};
</script>

<style >
</style>

